<template>
    <scroll class="content">
        <div class="left-menu">
            <div class="menu-item" v-for="item,index in menu" @click="itemClick(index)"
            :class="{active: index === currentIndex}" :key="index">{{item.title}}</div>
        </div>
    </scroll>
    
</template>

<script>
import Scroll from 'components/common/scroll/Scroll'

export default {
  components: { 
        Scroll 
    },
    props: {
        menu: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return{
            currentIndex: 0
        }
    },
    methods: {
        itemClick(index) {
            this.currentIndex = index
            this.$emit('selectItem', index)
        }
    }
}
</script>

<style scoped>
    .content{
        width: 100px;
        /* height: calc(100% - 44px - 49px); */
        height: 100%;
        /* overflow: hidden; */
    }
    .left-menu{
        background-color: #f6f6f6;
        
    }

    .menu-item{
        height: 45px;
        line-height: 45px;
        text-align: center;
    }

    .active{
        color: var(--color-tint);
        background: #fff;
        font-weight: bold;
        border-left: 3px solid var(--color-high-text);
    }
</style>